<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: #373737;
        }
        ul{
            width: 500px;
            display: flex;
            margin: 0 auto;
            list-style: none;
            justify-content: space-between;
            align-items: center;
            position: relative;
            overflow: hidden;
        }
        li{
            width: 60px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        li:nth-of-type(1){
            border-top:2px solid #ffb736 ;
        }
        li:nth-of-type(2){
            border-top:2px solid #ffd438 ;
        }
        li:nth-of-type(3){
            border-top:2px solid #82f830 ;
        }
        li:nth-of-type(4){
            border-top:2px solid #00fba6 ;
        }
        li:nth-of-type(5){
            border-top:2px solid #2beae2 ;
        }
        li:nth-of-type(6){
            border-top:2px solid #0296f8 ;
        }
        li:nth-of-type(7){
            border-top:2px solid #7736d0 ;
        }
        li:nth-of-type(8){
            border-top:2px solid #fa2df4 ;
        }
        li:nth-of-type(9){
            border-top:2px solid #ff3fac ;
        }

        a{
            display: inline-block;
            height: 40px;
            width: 100%;
            text-decoration: none;
            color: #999;
            position: relative;
            z-index: 1;
        }
        .kuai{
            width: 55px;
            height: 40px;
            background: white;
            position: absolute;
            left: 0;
            transform: translateX(-60px);
            transition: all .7s ;
        }
        li:nth-of-type(1):hover~.kuai{
            transform: translateX(0px);
            background: #ffb736;
        }
        li:nth-of-type(2):hover~.kuai{
            transform: translateX(55px);
            background: #ffd438;
        }
        li:nth-of-type(3):hover~.kuai{
            transform: translateX(110px);
            background: #82f830;
        }
        li:nth-of-type(4):hover~.kuai{
            transform: translateX(165px);
            background: #00fba6;
        }
        li:nth-of-type(5):hover~.kuai{
            transform: translateX(223px);
            background: #2beae2;
        }
        li:nth-of-type(6):hover~.kuai{
            transform: translateX(278px);
            background: #0296f8;
        }
        li:nth-of-type(7):hover~.kuai{
            transform: translateX(334px);
            background: #7736d0;
        }
        li:nth-of-type(8):hover~.kuai{
            transform: translateX(389px);
            background: #fa2df4;
        }
        li:nth-of-type(9):hover~.kuai{
            transform: translateX(444px);
            background: #ff3fac;
        }



        .box{
            width: 500px;
            height: 300px;
            overflow: hidden;
            margin: 0 auto;
            position: relative;
        }
        .box img{
            width: 500px;
            height: 300px;
            opacity: 0;
            transition: all 1s;
            position: absolute;
            top: 0;
            left: 0;
        }
        #pic1{
            transform: translateX(-100%) skew(-45deg);
        }
        #pic1:target{
            opacity: 1;
            transform: translateX(0) skew(0deg);
        }
        #pic2{
            transform: scale(2);
        }
        #pic2:target{
            opacity: 1;
            transform: scale(1);
        }
        #pic3{
            transform: translateY(-100%) scale(0) skew(45deg);
        }
        #pic3:target{
            opacity: 1;
            transform: translateY(0) scale(1) skew(0deg);
        }
        #pic4{
            transform: translateY(-100%) scaleY(2);
        }
        #pic4:target{
            opacity: 1;
            transform: translateY(0)  scaleY(1);
        }
    </style>
</head>
<body>
<div class="box">
    <img id="pic1" src="img/1.jpg">
    <img id="pic2" src="img/2.jpg">
    <img id="pic3" src="img/3.jpg">
    <img id="pic4" src="img/4.jpg">
</div>
<ul>
    <li>
        <a href="#pic1">个</a>
    </li>

    <li>
        <a href="#pic2">十</a>
    </li>

    <li>
        <a href="#pic3">百</a>
    </li>

    <li>
        <a href="#pic4">千</a>
    </li>

    <li>
        <a href="#pic1">万</a>
    </li>

    <li>
        <a href="#pic2">十万</a>
    </li>

    <li>
        <a href="#pic3">百万</a>
    </li>

    <li>
        <a href="#pic4">千万</a>
    </li>

    <li>
        <a href="#pic1">亿</a>
    </li>
    <li class="kuai"></li>
</ul>
<a style="color: red" href="7-24-work-2.html">作业二</a>
</body>
</html>